<template>
	<div class="card-content" :style="{ height: height, width: width }">
		<div class="card-title">{{ title }}</div>
		<div class="cart-info">
			<div class="cart-info-left">
				<div>
					<p class="info-title">{{name}}业绩</p>
					<p class="info-num">{{ price }}</p>
				</div>
				<div class="cart-item-bottom">
					<p class="info-title">{{name}}利润</p>
					<p class="info-num">{{ profit }}</p>
				</div>
			</div>
			<div class="cart-info-right">
				<div>
					<p class="info-title">{{lastname}}业绩</p>
					<p class="info-num">{{ lastPrice }}</p>
				</div>
				<div class="cart-item-bottom">
					<p class="info-title">{{lastname}}利润</p>
					<p class="info-num">{{ lastProfit }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		width: {
			type: String,
			default: '290px'
		},
		height: {
			type: String,
			default: '180px'
		},
		title: {
			type: String,
			default: '日'
		},
		name: {
			type: String,
			default: '日'
		},
		lastname: {
			type: String,
			default: '日'
		},
		price: {
			type: Number,
			default: 1
		},
		profit: {
			type: Number,
			default: 1
		},
		lastPrice: {
			type: Number,
			default: 1
		},
		lastProfit: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {};
	},
	watch: {},
	mounted() {},
	beforeDestroy() {},
	methods: {}
};
</script>

<style scoped="scoped">
.card-content {
	margin: 0 auto;
	position: relative;
	background: #f9f9f9;
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
	border-radius: 4px;
	box-sizing: border-box;
}
.card-title {
	position: absolute;
	top: -23px;
	left: 50%;
	margin-left: -23px;
	width: 46px;
	height: 46px;
	line-height: 46px;
	font-size: 16px;
	text-align: center;
	font-weight: bold;
	background: rgba(253, 253, 253, 1);
	box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.03);
	border-radius: 50%;
}
.cart-info{
	display: flex;
	padding-top: 26px;
}
.cart-info-left , .cart-info-right{
	flex: 1;
	text-align: center;
}
.info-title{
	font-size: 16px;
	color:#A6A6A6;
}
.info-num{
	font-size:20px;
	font-weight:400;
	color:#02060E;
}
.cart-item-bottom .info-title{
	margin-top: 20px;
}
</style>
